<template>
  <div class="content">
    <div class="title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>担保管理列表</b></el-breadcrumb-item>
        <el-breadcrumb-item><b>担保管理详情</b></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-content">
      <el-col style="margin-bottom: 20px">
        <div class="title">客户信息</div>
        <el-col>
          <el-row style="margin-bottom: 20px">
            <el-col :span="8"><span>姓名：{{customerInfo.customerName}}</span></el-col>
            <el-col :span="12"><span>家庭住址：{{customerInfo.idCardAddr}}</span></el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col :span="8"><span>身份证号：{{customerInfo.idCard}}</span></el-col>
            <el-col :span="8"><span>身份证归属地：{{customerInfo.idCardLocation}}</span></el-col>
            <el-col :span="8"><span>学历：{{customerInfo.education}}</span></el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col :span="8"><span>手机号：{{customerInfo.mobilePhone}}</span></el-col>
            <el-col :span="8"><span>工作单位：{{customerInfo.orgName}}</span></el-col>
            <el-col :span="8"><span>职务：{{customerInfo.job}}</span></el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col :span="8"><span>月收入：{{customerInfo.monthIncome}}</span></el-col>
            <el-col :span="8"><span>房产所有人：{{houseInfo.houseOwner}}</span></el-col>
            <el-col :span="8"><span>与购车人关系：{{houseInfo.relationship}}</span></el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col :span="8"><span>房屋性质：{{houseInfo.houseType}}</span></el-col>
            <el-col :span="8"><span>房产地址：{{houseInfo.houseAddr}}</span></el-col>
          </el-row>
          <el-row style="margin-bottom: 20px" v-for="(emergencyContact , index) in emergencyContacts">
            <el-col :span="8"><span>紧急联系人：{{emergencyContact.name}}</span></el-col>
            <el-col :span="8"><span>与购车人关系：{{emergencyContact.relationship}}</span></el-col>
            <el-col :span="8"><span>联系电话：{{emergencyContact.mobilephone}}</span></el-col>
          </el-row>
        </el-col>
      </el-col>
      <el-col style="margin-bottom: 20px">
        <div class="title">担保管理</div>
        <el-col v-for="(guarantee , index) in guarantees">
          <el-row>
            <span>日期  {{new Date().toLocaleDateString()}}</span>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col :span="8"><span>金额：{{guarantee.payAmount}}</span></el-col>
            <el-col :span="8"><span>担保类型：{{guarantee.payTypeName}}</span></el-col>
            <el-col :span="8"><span>付款时间：{{guarantee.payDate}}</span></el-col>
            <el-col :span="8"><span>账号性质：{{guarantee.accountTypeName}}</span></el-col>
          </el-row>
        </el-col>
      </el-col>
      <el-col>
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>总支出：{{outlay}}</span></el-col>
          <el-col :span="8"><span>总收入：{{income}}</span></el-col>
          <el-col :span="8"><span>合计：{{total}}</span></el-col>
        </el-row>
        <div class="title">订单记录</div>
        <el-col v-for="(order , index) in orders">
          <span>记录{{index+1}}</span>
          <el-row style="margin-bottom: 20px">
            <el-col :span="8"><span>订单编号：{{order.orderNo}}</span></el-col>
            <el-col :span="8"><span>车型：{{order.carModel}}</span></el-col>
            <el-col :span="8"><span>车牌号：{{order.licensePlateNo}}</span></el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col :span="8"><span>贷款额度：{{order.loanAmount}}</span></el-col>
            <el-col :span="8"><span>贷款银行：{{order.loanBankName}}</span></el-col>
            <el-col :span="8"><span>申请日期：{{order.gmtCreate}}</span></el-col>
          </el-row>
        </el-col>
      </el-col>
      <el-col>
        <div style="float: right">
          <el-button type="primary" @click="addGuarantee">新增担保管理</el-button>
        </div>
      </el-col>
    </div>
    <el-dialog title="新增担保管理" :visible.sync="guaranteeFormVisible" :modal-append-to-body='false'>
      <el-form :model="guaranteeRecordDialog" label-position="left" label-width="80px" class="dialogContent">
        <el-form-item label="金额">
          <el-input v-model="guaranteeRecordDialog.money" style="width:300px" :disabled="isDisable"></el-input>
        </el-form-item>
        <el-form-item label="账号性质">
          <el-select v-model="guaranteeRecordDialog.accountType" placeholder="请选择" style="width:300px">
            <el-option v-for="type in accountTypeList" :key="type.value" :label="type.label" :value="type.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="担保类型">
          <el-select v-model="guaranteeRecordDialog.type" placeholder="请选择" style="width:300px">
            <el-option v-for="type in typeList" :key="type.value" :label="type.label" :value="type.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="催收日期">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="guaranteeRecordDialog.date" style="width:300px"></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="foodButtonMiddle">
        <el-button type="primary" @click="submitGuaranteeRecord">确定</el-button>
        <el-button @click="guaranteeFormVisible=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ElCol from "element-ui/packages/col/src/col";
import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
import $ from 'jquery'
export default {
  name: 'GuaranteeManageDetail',
  components: {
    ElButton,
    ElCol,
    upload: require('../../components/other/upload')
  },
  data() {
    return {
      outlay: 0,
      income: 0,
      total: 0,
      customerInfo: {},
      houseInfo: {},
      emergencyContacts: [],
      guarantees: [],
      guaranteeFormVisible: false,
      guaranteeRecordDialog: { money: '', accountType: '', type: '', date: '' },
      typeList: [],
      accountTypeList: [],
      orderNo: this.$route.query.orderNo,
      customerIdCard: this.$route.query.customerIdCard
    }
  },
  methods: {
      addGuarantee(){
        this.guaranteeFormVisible=true
        guaranteeRecordDialog={money:'',accountType:'',type:'',date:''}
      },

    submitGuaranteeRecord() {
      let that = this
      var content = {}
      content.payAmount = this.guaranteeRecordDialog.money
      content.accountType = this.guaranteeRecordDialog.accountType
      content.customerName = this.customerInfo.customerName
      content.customerId = this.customerInfo.customerId
      content.idCard = this.customerIdCard
      content.payDate = this.$libs.formatDate(this.guaranteeRecordDialog.date, 'yyyy-MM-dd hh:mm:ss')
      content.payType = this.guaranteeRecordDialog.type
      this.$http.post('/guarantee', content)
        .then((response) => {
          console.log(response)
          if (response.data.success) {
            this.$message("添加成功")
            that.guaranteeFormVisible = false;
            that.getPageDetail();
            this.guaranteeRecordDialog = { money: '', accountType: '', type: '', date: '' }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },

    getAccountType() {
      let that = this
      this.$http.get('/dataDict/accountNature')
        .then((res) => {
          $.each(res.data.data, function(index, value) {
            that.accountTypeList.push({ label: value.name, value: value.code })
          })
        })
        .catch((error) => {
          console.log(error)
        })
    },

    getGuaranteeType() {
      let that = this
      this.$http.get('/dataDict/guaranteeType')
        .then((res) => {
          $.each(res.data.data, function(index, value) {
            that.typeList.push({ label: value.name, value: value.code })
          })
        })
        .catch((error) => {
          console.log(error)
        })
    },

    getPageDetail() {
      let that = this
      this.$http.get('/guarantee/' + this.customerIdCard + '/' + this.orderNo)
        .then((response) => {
          this.customerInfo = response.data.data.customerInfoVO.customer
          this.customerInfo.education = this.$libs.jsonGetName(this.$store.state.education, response.data.data.customerInfoVO.customer.education),
            this.customerInfo.job = this.$libs.jsonGetName(this.$store.state.job, response.data.data.customerInfoVO.customer.job)

          this.houseInfo = response.data.data.customerInfoVO.houseInfo
          this.houseInfo.relationship = this.$libs.jsonGetName(this.$store.state.link, response.data.data.customerInfoVO.houseInfo.relationship)
          this.houseInfo.houseType = this.$libs.jsonGetName(this.$store.state.unitType, response.data.data.customerInfoVO.houseInfo.houseType)

          $.each(response.data.data.customerInfoVO.emergencyContacts, function(index, value) {
            var contactList = {}
            contactList.name = value.name
            contactList.mobilephone = value.mobilephone
            contactList.relationship = that.$libs.jsonGetName(that.$store.state.link, value.relationship)
            that.emergencyContacts.push(contactList)
          })
          this.income = 0
          this.outlay = 0
          this.guarantees = response.data.data.guaranteeVOList
          $.each(this.guarantees, function(index, value) {
            if (value.payType == 0) {
              that.income = that.income + value.payAmount
              value.payTypeName = "收入"
            } else {
              that.outlay = that.outlay + value.payAmount
              value.payTypeName = "支出"
            }
            $.each(that.accountTypeList, function(index_, type) {
              if (type.value == value.accountType) {
                value.accountTypeName = type.label
              }
            })
          })

          this.total = this.income - this.outlay
          this.orders = response.data.data.orderInfoVOS
        })
        .catch((error) => {
          console.log(error)
        })
    }

  },

  mounted() {
    this.getPageDetail()
    this.getAccountType()
    this.getGuaranteeType()
    this.$store.commit('link', this)
    this.$store.commit('unitType', this)
    this.$store.commit('education', this)
    this.$store.commit('job', this)
  }
}

</script>
<style lang="scss" scoped>
.content {
  padding: 10px;
  background: #F7F7F7;
  .title {
    color: #99A9BF;
    font-size: 14px;
    line-height: 18px;
    margin: 8px 0px 10px 0px;
  }
  .main-content {
    font-size: 14px;
    color: #475669;
    background: #fff;
    position: fixed;
    top: 96px;
    bottom: 10px;
    left: 216px;
    right: 16px;
    overflow: auto;
    padding: 20px;
  }
  .dialogContent {
    padding-left: 18%;
  }
  .foodButtonMiddle {
    text-align: center;
  }
}

.title {
  margin-bottom: 20px;
  font-size: 14px;
  color: #475669;
  padding-left: 8px;
  border-left: 3px solid #20A0FF;
}

</style>
